<template>
    <div class="ui-box">
        <div class="cover" :style="{'width':screenW+'px','height':screenW+'px'}">
            <div class="slider" :style="{'width':screenW*selectedSku.pic.length+'px','height':screenW+'px'}">
                <img v-for="val of selectedSku.pic" :src="val+'?imageView2/2/w/600'"
                     :style="{'width':screenW+'px','height':screenW+'px'}"
                     track-by="$index">
            </div>
        </div>
        <div class="intro">
            <h1>
                {{selectedSku.title}}
            </h1>
            <div v-if="selectedSku.label&&selectedSku.label.length>0" class="tags">
                <span v-for="val of selectedSku.label" class="tag">{{val}}</span>
            </div>
            <div v-if="selectedSku.time_kill" class="tag-timer" data-time="{{selectedSku.time_kill}}">
                <span>{{selectedSku.time_kill | timeFormat 'hh:mm:ss'}}</span>
            </div>
            <div class="stock">
                库存:{{selectedSku.stock}}件
            </div>
            <div class="ui-price price-red">{{selectedSku.price/10}}</div>
            <div v-if="selectedSku.price_cost>0" class="ui-price price-gray">{{selectedSku.price_cost/10}}</div>
        </div>
    </div>

    <div class="ui-box ui-v-a bar-44px" v-link="{name:'service'}">
        <i class="ic ic-certified"></i>
        <span>100%正品</span>

        <i class="ic ic_promise"></i>
        <span>售后保障</span>

        <div class="ui-more"></div>
    </div>


    <div class="ui-box">
        <div class="box-title ui-v-a">
            <i class="ic ic_params"></i>
            <span>商品参数</span>
        </div>
        <div class="box-params ui-c-f">
            <template v-if="selectedSku.brand">
                <div class="parama-title">品牌</div>
                <div class="parama-value">{{selectedSku.brand}}</div>
            </template>
            <template v-if="selectedSku.place">
                <div class="parama-title">产地</div>
                <div class="parama-value">{{selectedSku.place}}</div>
            </template>
            <template v-if="selectedSku.supplier">
                <div class="parama-title">供应商</div>
                <div class="parama-value">{{selectedSku.supplier}}</div>
            </template>
        </div>
    </div>

    <div v-if="selectedSku.description&&selectedSku.description.length>0" class="ui-box">
        <div class="box-title ui-v-a">
            <i class="ic ic_detail"></i>
            <span>商品详情</span>
        </div>
        <div class="box-detail">
            <template v-for="val of selectedSku.description">
                <div v-if="val.key == 'text'" class="paragraph">{{val.value}}</div>

                <img v-if="val.key == 'pic'" :src="val.value+'?imageView2/2/w/500'">
            </template>
        </div>
    </div>

    <div class="ui-page-holder"></div>

    <div class="ui-cart" @click="checkAndGoto({name:'cart'})">
        <div v-if="cart>0" class="ui-cart-num">{{cart}}</div>
    </div>

    <sku-select :selected-sku="selectedSku" :strategy="strategy" :skus="skus" :relative="relative"
                @change-sku="changeSku"
                @add-cart="addCart"></sku-select>

</template>

<script type="text/babel">
    import http from '../libs/http'
    import Auth from '../services/auth';
    import IScroll from 'iscroll';
    import skuSelect from './productSelect.vue';

    var secKillTimer;
    export default{
        components: {
            skuSelect: skuSelect
        },

        data(){
            return {
                selectedSku: {
                    pic: [],
                    description: []
                },
                cart: db.get('cart_count'),

                relative: [],
                strategy: {},
                skus: [],
                screenW: db.w,
                pic: []
            };
        },

        ready: function () {
            this.initData(true);
        },

        attached: function () {
            this.initData();
        },
        detached: function () {
            clearInterval(secKillTimer);
        },
        methods: {
            getSKUbyId: function (id) {
                for (var i = 0; i < this.skus.length; i++) {
                    if (this.skus[i]._id == id) {
                        return this.skus[i];
                    }
                }

                return null;
            }
            , checkAndGoto: function (pathInfo) {
                if (Auth.isLogin)
                    this.$route.router.go(pathInfo);
                else
                    this.$dispatch('need-login');
            },

            changeSku: function (sku) {
                this.selectedSku = sku;
            },

            addCart: function (count) {
                this.cart = count;
                console.log(count);
                db.set('cart_count', count);
            },

            initData: function (refresh) {
//                if (!this.$route.params.refresh || refresh)
//                    return;
//                this.$route.params.refresh = false;

                this.getData();
            },

            getData: function () {
                var self = this;
                var selectedSkuId = this.$route.params.sku_id;
                var selectedSpuId = this.$route.params.spu_id;


                var conditions = {};

                if (selectedSkuId && selectedSkuId != '0')
                    conditions.sku_id = selectedSkuId;

                if (selectedSpuId && selectedSpuId != '0')
                    conditions.spu_id = selectedSpuId;

                http.get({
                            url: api + 'commoditypage',
                            jsonp: true,
                            data: conditions
                        })
                        .then(function (obj) {
                            if (obj.code == 0) {

                                self.selectedSku = obj.data.select;
                                self.skus = obj.data.skus || [];
                                self.relative = obj.data.relative || [];
                                self.strategy = obj.data.strategy || {};
                            }

                            setTimeout(function () { //IScroll必须大小固定后才能创建
                                new IScroll('.cover', {
                                    snap: true,
                                    scrollX: true,
                                    scrollY: false
                                });

                            }, 200)


                            secKillTimer = setInterval(function () {
                                if (self.selectedSku.time_kill > 0) {
                                    self.selectedSku.time_kill -= 1000;
                                } else
                                    clearInterval(secKillTimer);
                            }, 1000);


                        });
            }
        }
    }
</script>

<style scoped>

    .cover {
        width: 100%;
        overflow: hidden;
    }

    .slider {
        height: 100%;
    }

    .cover img {
        display: block;
        float: left;
    }

    .intro {
        padding: 8px;
    }

    h1 {
        font-size: 13px;
        font-weight: lighter;
        margin-right: 80px;
    }

    .tag:first-child {
        padding: 2px;
        font-size: 10px;
        color: white;
        background: #ffba00;
    }

    .tag {
        padding: 2px;
        font-size: 10px;
        color: #888888;
        background: #eeeeee;
    }

    .tag-timer {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        display: inline-block;
        font-size: 10px;
        height: 16px;
        padding: 0 4px 0 2px;
    }

    .tag-timer::after {
        content: '';
        display: block;
    }

    .tag-timer::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 100%;
        background: url(../../static/img/ic_clock.png) no-repeat center;
        background-size: contain;
        margin: 0 2px;
        vertical-align: middle;
    }

    .tag-timer > span {
        vertical-align: middle;
    }

    .stock {
        font-size: 10px;
        color: #888888;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
        display: inline-block;
    }

    .price-gray {
        display: inline-block;
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .bar-44px {
        padding: 0 8px;
        height: 44px;
    }

    .box-params {
        padding: 8px 16px;
        font-size: 12px;
    }

    .parama-title {
        float: left;
        width: 30%;
        color: #888888;
        font-weight: normal;
        padding: 4px 0;
    }

    .parama-value {
        float: left;
        width: 70%;
        padding: 4px 0;
    }

    .box-detail > div {
        font-size: 14px;
        line-height: 2em;
        padding: 8px;
        text-indent: 2em;
    }

    .box-detail > img {
        width: 100%;
    }

    .box-title {
        height: 36px;
        color: #888888;
        font-size: 13px;
        border-bottom: solid 1px #f0f0f0;
        margin: 0 8px;
    }

    .ic {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        vertical-align: middle;
    }

    .ic-certified {
        width: 21px;
        height: 24px;
        background-image: url("../../static/img/ic_certified.png");
    }

    .ic_promise {
        width: 21px;
        height: 24px;
        background-image: url("../../static/img/ic_promise.png");
    }

    .ic_detail {
        width: 15px;
        height: 15px;
        background-image: url("../../static/img/ic_detail.png");
    }

    .ic_params {
        width: 15px;
        height: 15px;
        background-image: url("../../static/img/ic_params.png");
    }

</style>